<template>
  <div id="login" :style="{'background-image': `url('${background}')`}">
    <div class="login_div">
      <div class="login_div_centent">
        <!-- <img src="../../assets/padh.png" alt="logo"> -->
        <!-- LOGO -->
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form_subimt">
          <el-form-item label="工号：" prop="username">
            <el-input v-model="form.username" placeholder="请输入工号" @keyup.enter.native="onSubmit('form')" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" show-password @keyup.enter.native="onSubmit('form')" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="onSubmit('form')">
              登录
            </el-button>
            <div>
              <el-button type="primary" style="width: 100%" @click="jumpUIS()">
                UIS 认证登录
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      background: `${process.env.NODE_ENV !== 'development' ? '/' + require('../../../package.json').name : ''}/conf/background.png?time=${Date.now()}`,
      form: {
        username: 'oat1',
        password: '123456'
      },
      rules: {
        username: [
          { required: true, message: '工号不能为空', trigger: 'blur' },
          { min: 4, max: 16, message: '工号长度在 4 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    onSubmit (formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.$store.dispatch('login', this.form).then(data => {
            this.$router.push('/')
          })
        }
      })
    },
    jumpUIS () {
      // const uisLogin = window.location.protocol + '//' + window.location.host + '/#/uis/login'
      const uisLogin = sessionStorage.getItem('UIS_LOGIN_CALLBACK')
      this.jump(sessionStorage.getItem('UIS_URL') + uisLogin)
    }
  }
}
</script>

<style lang="scss" scoped>
  #login{
    background: #545C64;
    height: 100%;
    .login_div{
      padding-top: 15%;
      margin: 0 auto;
      width: 20%;
      .login_div_centent{
        background: white;
        padding: 30px;
        filter: drop-shadow(0 0 5px white);
        .form_subimt{
          margin-top: 10px;
        }
      }
    }
  }

</style>
